<template>
  <a-card :bordered="false">

    <div class="table-page-search-wrapper">
      <a-form layout="inline" :form="form">
        <a-row :gutter="24">

          <a-col :md="6" :sm="24">
            <a-form-item label="任务名称">
              <a-input placeholder="请输入任务名称" v-model="query.jobName" ></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="7" :sm="24">
            <a-form-item label="调度时间" >
              <a-range-picker show-time style="width: 370px;" v-model="query.triggerTime"
                format="YYYY-MM-DD HH:mm:ss"
                valueFormat="YYYY-MM-DD HH:mm:ss"
                :placeholder="['开始时间', '结束时间']"/>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="24">
            <a-form-item label="执行结果" >
              <a-select defaultValue="0" style="width: 100px" v-model="query.logStatus">
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">成功</a-select-option>
                <a-select-option value="2">失败</a-select-option>
                <a-select-option value="3">运行中</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="initTable" icon="search">查询</a-button>
              <a-button type="primary" @click="" icon="reload" style="margin-left: 8px">重置</a-button>
              <a-popconfirm placement="topLeft" ok-text="确认清空" cancel-text="取消" @confirm="confirmClear" @cancel="clearCancel">
                <a-icon slot="icon" type="" style="color: red" />
                <template slot="title">
                   <a-form-item label="清理选项" >
                     <a-select style="width: 300px" v-model="query.clearLogType">
                      <a-select-option value="1">一个月之前日志数据</a-select-option>
                      <a-select-option value="2">三个月之前日志数据</a-select-option>
                      <a-select-option value="3">六个月之前日志数据</a-select-option>
                      <a-select-option value="4">一年之前日志数据</a-select-option>
                      <a-select-option value="5">一千条以前日志数据</a-select-option>
                      <a-select-option value="6">一万条以前日志数据</a-select-option>
                      <a-select-option value="7">三万条以前日志数据</a-select-option>
                      <a-select-option value="8">十万条以前日志数据</a-select-option>
                      <a-select-option value="9">清理所有日志数据</a-select-option>
                    </a-select>
                   </a-form-item>
                </template>
                <a-button type="danger" @click="" icon="interation" style="margin-left: 8px">清空日志</a-button>
              </a-popconfirm>
<!--              <a-button type="danger" @click="" icon="delete" style="margin-left: 8px" v-if="showDelete">批量删除</a-button>-->
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>

    <j-vxe-table
      ref="vTable"
      toolbar
      row-selection
      keep-source
      :height="484"
      :loading="loading"
      :dataSource="dataSource"
      :columns="columns"
      :pagination="pagination"
      :toolbar-config="toolbarConfig"
      @pageChange="handlePageChange"
      @selectRowChange="checkChange"
      style="margin-top: 0px;"
    >
      <template v-slot:timeFormat="props">
        <template>
          <span v-if="moment(props.value).isValid()">{{moment(props.value).format('YYYY-MM-DD HH:mm:ss')}}</span>
          <span v-else>—</span>
        </template>
      </template>

      <template v-slot:executeTime="props">
        <template>
          <span v-if="moment(props.row.triggerTime).isValid()&&moment(props.row.handleTime).isValid()">{{ (moment(props.row.handleTime).diff(moment(props.row.triggerTime),'seconds')/60).toFixed(2)}}分钟</span>
          <span v-else>—</span>
        </template>
      </template>

      <template v-slot:triggerMsg="props">
        <template>
          <a-tooltip placement="left">
            <template slot="title">
              <div v-html="props.value"></div>
            </template>
            <a>查看</a>
          </a-tooltip>
        </template>
      </template>

      <template v-slot:triggerCode="props">
        <template>
<!--          <span>{{props.value}}</span>-->
          <a-tag color="#87d068" v-if="props.value===200">成功</a-tag>
          <a-tag color="#f50" v-if="props.value===500">失败</a-tag>
          <a-tag color="#2db7f5" v-if="props.value===0">运行中</a-tag>
        </template>
      </template>

      <template v-slot:handleCode="props">
        <template>
          <!--          <span>{{props.value}}</span>-->
          <a-tag color="#87d068" v-if="props.value===200">成功</a-tag>
          <a-tag color="#f50" v-if="props.row.triggerCode===500||props.row.handleCode===500">失败</a-tag>
          <a-tag color="#2db7f5" v-if="props.row.triggerCode===200&&props.row.handleCode===0">运行中</a-tag>
        </template>
      </template>

      <template v-slot:action="props">
        <template>
          <a @click="showDetail(props.row)">执行日志</a>
        </template>
      </template>


    </j-vxe-table>

    <j-modal
      title="日志详情"
      width="1000px"
      :visible="detailVisible"
      @cancel="detailVisible=false"
      @ok="detailVisible=false"
      cancelText="关闭">
      <div style="overflow-y: auto;height: 500px;">
        <span v-html="detailText"></span>
      </div>
    </j-modal>

  </a-card>
</template>

<script>

import moment from 'moment'
import { WebsocketTableMixin } from '../../../mixins/WebsocketTableMixin'
import { JVXETypes } from '@/components/jeecg/JVxeTable'
import store from '@/store/'
import { clearLog, getLogDetail } from '../../../api/api'

export default {
  name: 'CollectionOfflineTaskLogList',
  mixins: [WebsocketTableMixin],
  components: {
  },
  data() {
    return {
      moment,
      query:{
        logStatus: '0'
      },
      form: this.$form.createForm(this),
      detailVisible: false,
      detailText: '',
      showDelete:false,
      loading: false,
      dataSource: [],
      toolbarConfig: {
        // prefix 前缀；suffix 后缀
        slot: ['prefix', 'suffix'],
        // add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮
        btn: ['clearSelection']
      },
      columns: [
        {
          title: '任务ID',
          key: 'id',
          width: '100px'
        },
        {
          title: '任务名称',
          key: 'taskName',
          width: '250px',
          ellipsis: true
        },
        // {
        //   title: '任务类型',
        //   key: 'executorHandler',
        //   width: '100px',
        //   scopedSlots: { customRender: 'executorHandler' }
        // },
        {
          title: '调度开始时间',
          key: 'triggerTime',
          width: '200px',
          type: JVXETypes.slot,
          slotName: 'timeFormat',
        },
        {
          title: '调度结束时间',
          key: 'handleTime',
          type: JVXETypes.slot,
          width: '200px',
          slotName: 'timeFormat',
        },
        {
          title: '执行时间',
          key: 'handleTime',
          type: JVXETypes.slot,
          width: '150px',
          slotName: 'executeTime',
        },
        {
          title: '调度结果',
          key: 'triggerCode',
          width: '80px',
          type: JVXETypes.slot,
          slotName: 'triggerCode',
          align: 'center'
        },
        {
          title: '执行结果',
          key: 'handleCode',
          width: '80px',
          type: JVXETypes.slot,
          slotName: 'handleCode',
          align: 'center'
        },
        {
          title: '调度备注',
          key: 'triggerMsg',
          width: '80px',
          type: JVXETypes.slot,
          slotName: 'triggerMsg',
          align: 'center'
        },
        {
          title: '写入数量',
          key: 'writeNum',
          width: '120px',
          scopedSlots: { customRender: 'handleNum' }
        },
        {
          title: '更新数量',
          key: 'updateNum',
          width: '120px',
          scopedSlots: { customRender: 'handleNum' }
        },
        // {
        //   title: '实际输出数量',
        //   key: 'outputNum',
        //   width: '150px',
        //   scopedSlots: { customRender: 'handleNum' }
        // },
        {
          title: '错误数量',
          key: 'errorNum',
          width: '120px',
          scopedSlots: { customRender: 'handleNum' }
        },
        // {
        //   title: '执行备注',
        //   key: 'executorParam',
        //   scopedSlots: { customRender: 'executorParam' }
        // },
        {
          title: '操作',
          // key: 'action',
          fixed: 'right',
          width: '100px',
          align: 'center',
          type: JVXETypes.slot,
          slotName: 'action'
          // scopedSlots: { customRender: 'action' }
        }
      ],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        pageSizeOptions: ['10', '20', '30', '100', '200']
      },
      socketUrl: 'logWebsocket'
    }
  },
  mounted() {
    this.query.jobName = this.$route.query.taskName
    // this.$nextTick(()=>{
    //   this.queryLog()
    // })
    // this.websocketSend(JSON.stringify(this.query))
    // console.log(111111)
  },
  methods: {
    handlePageChange(event) {
      // 重新赋值
      this.query.current = event.current
      this.query.pageSize = event.pageSize
      this.query.pageNo = event.current
      this.query.command = '/jobLogPages'
      // 查询数据
      // this.randomPage(event.current, event.pageSize, true)
      this.websocketSend(JSON.stringify(this.query))
    },
    initTable(){
      this.query.current = 1
      this.query.pageSize = this.pagination.pageSize
      this.query.pageNo = 1
      this.query.command = '/jobLogPages'
      // 查询数据
      // this.randomPage(event.current, event.pageSize, true)
      this.websocketSend(JSON.stringify(this.query))
    },
    checkChange(e){
      if(e.selectedRowIds.length>0){
        this.showDelete = true
      }else {
        this.showDelete = false
      }
    },
    clearCancel(){
      this.query={
        logStatus: '0'
      }
    },
    confirmClear(){
      let formData=new FormData()
      formData.append('jobGroup',1)
      formData.append('type',this.query.clearLogType)
      formData.append('jobId',-1)
      clearLog(formData).then((res)=>{
        // console.log(res)
        if(res.code===200){
          this.$message.success('清空成功')
          this.query={
            logStatus: '0'
          }
        }else {
          this.$message.error('清空失败')
        }
      })
    },
    showDetail(row){
      this.detailVisible = true
      let params= {}
      params.executorAddress = row.executorAddress
      params.triggerTime = row.triggerTime
      params.logId = row.id
      params.fromLineNum = 1
      // formData.append('executorAddress',row.executorAddress)
      // formData.append('triggerTime',row.triggerTime)
      // formData.append('logId',row.jobId)
      getLogDetail(params).then((res)=>{
        // console.log(res)
        if(res.code===200){
          this.detailText = res.content.logContent
        }else {
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>
<style scoped>
.ant-card {
  margin-left: -30px;
  margin-right: -30px;
}
</style>